<template>
  <q-page class="m-auto w-full bg-pink-50 h-full" padding>
    <div class="w-full flex justify-center h-12">
      <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="text">
        <template v-slot:append>
          <q-icon class="hover:cursor-pointer" name="search" />
        </template>
      </q-input>
    </div>
    <div class="w-full m-auto mt-10 bg-white rounded-lg  container grid grid-cols-4 gap-6 overflow-y-scroll">
      <div @click="jumpToDetailPage(item)" class=" hover:shadow-lg hover:cursor-pointer"
        v-for=" item in data.slice(0, 10)" :key="item">
        <div
          class="max-w-sm h-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
          <div class="w-full h-2/3">
            <img class="rounded-t-lg  w-full h-full " :src="item.pics" alt="" />
          </div>
          <div class="p-5 h-1/3">
            <a class="flex justify-between">
              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ item.name }}</h5>
              <span
                class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
                {{ item.rating }}
              </span>
            </a>
            <p class="mt-1 mb-3 font-normal text-gray-700 dark:text-gray-400">
              {{ item.ingredient }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getAllBlogs } from "src/boot/blogs/blogs";
const router = useRouter();
let data = ref([]);
getAllBlogs().then(res => {
  data.value = res.data.data
})

function jumpToDetailPage(queryItem) {
  router.push({
    name: 'detail',
    query: queryItem
  })
}
</script>

<style>
.container {
  height: calc(100vh - 150px);
}
</style>
